import React, {Component} from 'react';
import {View, StyleSheet, TouchableOpacity, Alert} from 'react-native';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as homeActions from '../../action/home';
import {Container, Header, Title, Left, Right, Button, Body, Content, Text, Card, CardItem} from 'native-base';

type Props = {};

class Home extends Component<Props> {
    static navigatorButtons = {
        rightButtons: [
            {
                title: 'Edit',
                id: 'edit'
            },
            {
                icon: require('../../assets/home.png'),
                title: 'Home',
                id: 'home'
            }
        ],
        leftButtons: [
            {
                component: 'vIcon',
                passProps: {
                    name: 'menu',
                    size: 24,
                    color: 'black',
                },
                title: 'UserSlider',
                id: 'user-slider-tap'
            }
        ]
    };
    // static navigatorButtons = {
    //     rightButtons: [
    //         {
    //             title: 'Edit', // for a textual button, provide the button title (label)
    //             id: 'edit', // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
    //             testID: 'e2e_rules', // optional, used to locate this view in end-to-end tests
    //             disabled: true, // optional, used to disable the button (appears faded and doesn't interact)
    //             disableIconTint: true, // optional, by default the image colors are overridden and tinted to navBarButtonColor, set to true to keep the original image colors
    //             showAsAction: 'ifRoom', // optional, Android only. Control how the button is displayed in the Toolbar. Accepted valued: 'ifRoom' (default) - Show this item as a button in an Action Bar if the system decides there is room for it. 'always' - Always show this item as a button in an Action Bar. 'withText' - When this item is in the action bar, always show it with a text label even if it also has an icon specified. 'never' - Never show this item as a button in an Action Bar.
    //             buttonColor: 'blue', // Optional, iOS only. Set color for the button (can also be used in setButtons function to set different button style programatically)
    //             buttonFontSize: 14, // Set font size for the button (can also be used in setButtons function to set different button style programatically)
    //             buttonFontWeight: '600', // Set font weight for the button (can also be used in setButtons function to set different button style programatically)
    //         },
    //         {
    //             icon: require('../../assets/mine.png'), // for icon button, provide the local image asset name
    //             id: 'add' // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
    //         }
    //     ]
    // };
    constructor (props) {
        super(props);
        this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
    }

    onNavigatorEvent (event) {
        if (event.type == 'DeepLink') {
            this.handleDeepLink(event);
        } else {
            switch (event.id) {
                case 'edit':
                    Alert.alert('編輯導航按鈕', '哈哈哈我是編輯');
                    break;

                case 'home':
                    Alert.alert('回首頁按鈕', '我要回首頁了');
                    break;
                case 'user-slider-tap':
                    this.props.navigator.toggleDrawer({
                        side: 'left', // the side of the drawer since you can have two, 'left' / 'right'
                        animated: true, // does the toggle have transition animation or does it happen immediately (optional)
                        to: 'open' // optional, 'open' = open the drawer, 'closed' = close it, missing = the opposite of current state
                    });
                    break;
                case 'tabSelected':
                    this.onTabSelected();
                    break;

                default:
                    console.log('Unhandled event ' + event.id);
                    break;
            }
        }
    }

    handleDeepLink (event) {
        const parts = event.link.split('/');
        if (parts[0] == 'tab1' && parts[1] == 'pushScreen') {
            this.props.navigator.toggleDrawer({
                side: 'left',
                animated: true,
                to: 'closed'
            });

            this.props.navigator.push({
                title: "Pushed from SideMenu",
                screen: parts[2],
                passProps: {
                    str: 'This is a prop passed in \'navigator.push()\'!',
                    obj: {
                        str: 'This is a prop passed in an object!',
                        arr: [
                            {
                                str: 'This is a prop in an object in an array in an object!'
                            }
                        ]
                    },
                    num: 1234
                }
            });
        }
    }

    onTabSelected () {
        console.log('selectedTabChanged');
        this.props.navigator.setButtons({
            rightButtons: [
                {
                    id: 'account',
                    icon: require('../../assets/home.png')
                }
            ]
        });
    }

    render () {
        return (
            <Container>
                <Text>Home</Text>
                <Text>initCount: {this.props.home.initCount}</Text>

                <TouchableOpacity
                    style={styles.addBtn}
                    onPress={() => {
                        this.props.homeActions.homeAdd({
                            initCount: this.props.home.initCount + 2
                        });
                    }}
                >
                    <Text style={styles.btnText}>加2</Text>
                </TouchableOpacity>

                <TouchableOpacity
                    style={styles.cutBtn}
                    onPress={() => {
                        this.props.homeActions.homeCut({
                            initCount: this.props.home.initCount - 2
                        });
                    }}
                >
                    <Text style={styles.btnText}>减2</Text>
                </TouchableOpacity>

                <TouchableOpacity
                    style={styles.jumpBtn}
                    onPress={() => {
                        this.props.navigator.push({
                            screen: 'nextPage',
                            title: '下一页',
                            passProps: {
                                passData: 'hh'
                            }
                        });
                    }}
                >
                    <Text style={styles.btnText}>跳转到NextPage</Text>
                </TouchableOpacity>
            </Container>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#ccc',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    addBtn: {
        backgroundColor: 'green',
        marginVertical: 20,
        width: 200,
        height: 59,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10
    },
    cutBtn: {
        backgroundColor: 'red',
        width: 200,
        height: 59,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10
    },
    jumpBtn: {
        marginTop: 20,
        backgroundColor: '#E3a4d3',
        width: 200,
        height: 59,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10
    },
    btnText: {
        fontSize: 18,
        color: 'white'
    }
});

function mapStateToProps (state) {
    return {
        home: state.home
    };
}

function mapDispatchToProps (dispatch) {
    return {
        homeActions: bindActionCreators(homeActions, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);
